$black-color-border-highlight : lighten(black, 22%);
$black-body-bg                : #0f0f13;
$black-bg                     : #1c1f24;
$black-color-border           : lighten($black-bg, 5%);
$black-color-text             : lighten(black, 90%);
$black-color-text-info        : lighten(black, 65%);
$black-color-text-subtitle    : lighten(black, 45%);
$black-color-text-comment     : lighten(black, 55%);
$black-color-text-ignore      : lighten(black, 35%);
$black-btn-bg                 : lighten(black, 25%);


$black-orange: darken($orange, 10%);

body.black {
  background-color: $black-body-bg;
  @include transition(background-color 0.5s);

  // INFOS
  .info-panel{
    color: $black-color-text-info;
    background-color: $black-bg;
    border-color: $black-color-border;
  }

  .with-dashline-center{
    > div{
      background-color: $black-bg;
    }
    &:before{
      border-color: lighten($black-color-border, 10%);
    }
  }

  .key-info{
    &-item{
      &:before{
        border-color: lighten($black-color-border, 10%);
      }
      h6,p{
        background-color: $black-bg;
      }
    }
  }

  .time-info {
    .time {
      color: $black-color-text;
    }
  }

  .speed-info {
    .speed {
      color: white;
      border-color: $black-color-border;
    }
    .statistic{
      &-item {
        color: $black-color-text;
      }
    }
  }

  .copyright{
    color: $black-color-text-subtitle;
    border-top: 1px dashed $black-color-border;
  }

  .logo {
    img {
      opacity: 0.6;
    }
  }



  // TABLES
  .table-container {
    border: 1px solid $black-color-border;
    background-color: $black-bg;
  }

  .table{
    color: $black-color-text-subtitle;
  }

  thead {
    tr {
      border-bottom: $black-color-border;
      th {
        color: $black-color-text-subtitle;
      }
    }
  }
  tbody tr {
    &:nth-child(odd) {
      background-color: darken($black-bg, 4%);
    }

    &:nth-child(even) {
      background-color: darken($black-bg, 2%);
    }

    &:hover {
      background-color: lighten($black-bg, 2%);
    }
  }
  td{
    .btn {
      color: $black-color-text-info;
      background-color: $black-color-border;
      border: 1px solid $black-color-border;
      &:hover{
        color: white;
        background-color: $red;
      }
    }
  }

//  TEMPLATE
  .template-container{
    color: $black-color-text;
    border: 1px solid $black-color-border;
    background-color: $black-bg;
  }

  .typing-container {
    textarea {
      border: 1px solid $black-color-border;
      background-color: $black-bg;
      color: $black-color-text-subtitle;
      &:focus {
        @include box-shadow(inset 0 0 10px transparentize(black, 0.6));
      }
    }
  }
  .text{
    .correct{
      color: #363a46 !important;
    }
    .wrong{
      background-color: $red;
      color: white !important;
    }
  }

  // BUTTONS
  .btn-group{
    border: 1px solid $black-color-border;
    .btn{
      color: $black-color-text-info;
      background-color: $black-bg;
      border-right: 1px solid $black-color-border;
      &:active{
        @include box-shadow(inset 0 1px 2px rgba(0,0,0,1))
      }
      &:hover{
        background-color: $black-color-border-highlight;
      }
      &:last-child{
        border-right: none;
      }
      &.danger{
        background-color: $red;
        color: white;
      }
    }
    .btn-vertical{
      > *{
        border-right: none;
        border-bottom: 1px solid $black-color-border;
        &:last-child{
          border-bottom: none;
        }
      }
    }
  }

  input[type=checkbox] + label {
    background-color: lighten(black, 40%);
  }
  input[type=checkbox]:checked + label {
    background-color: $dark-green;
  }
  input[type=checkbox] + label:before {
    background-color: $black-bg;
  }



  input[type=radio] + label{
    color: $black-orange;
  }

  input[type=radio]:checked + label{
    background-color: $black-orange;
    color: white;
    &:hover{
      background-color: darken($black-orange, 5%);
    }
  }


  //  RESET
  ::-webkit-scrollbar-track {
    border-right: 1px solid $black-color-border;
    background-color: $black-color-border;
  }

  ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: $black-color-text-subtitle;
    transition: all .2s;
    height: 3px;
  }

  :hover::-webkit-scrollbar-thumb {
    background-color: #dfdfdf;
    transition: all .2s;
  }

  kbd{
    background-color: $black-btn-bg;
    border: 2px solid lighten($black-btn-bg, 8%);
    margin-right: 3px;
    color: $black-color-text-info;
    @include box-shadow(1px 2px 1px darken($black-btn-bg, 15%));
  }

  // EDITOR
  .editor {
    background-color: $black-body-bg;
    &-content, &-title{
      color: $black-color-text;
      border: 1px solid $black-color-border;
      background-color: $black-bg;
      &:focus{
        border-color: $green;
        @include box-shadow(0 0 0 3px transparentize($green, 0.5));
      }
    }
    &-title{
      font-size: $fz-editor-title;
    }

    &-toolbar{
      display: flex;
      justify-content: space-between;
    }
  }

  // STAND ALONE
  .type-pad-standalone{
    background-color: $black-body-bg;
    .standalone-speed-info{
      .speed{
        color: $black-color-text;
      }
    }
  }

  // RECORD LIST
  .record-container{
    .record-item{
      background-color: $black-bg;
      border-color: $black-color-border;
      .speed{
      }
      .meta{
        color: $black-color-text-comment;
        border-color: $black-color-border-highlight;
      }
    }
  }


  // SCORE
  .score-info{
    .title{
      border-color: $black-color-border;
    }
  }
  .score-info-item{
    .score{
      color: $black-color-text-info;
    }
    .desc{
      color: $black-color-text-ignore;
    }
  }


  .score-statistics-container{
    .title{
    }
    .score-statistics-list{
      .score-statistics-item{
        .chart-bar{
          background-color: lighten($black-bg, 2%);
        }
        .label{
        }
      }
    }
  }



  // TEXT
  $colors  : (
          'green'      : $green,
          'dark-green' : $dark-green,
          'cyan'       : $cyan,
          'blue'       : $blue,
          'purple'     : $purple,
          'roseo'      : $roseo,
          'red'        : $red,
          'orange'     : $orange,
          'yellow'     : $yellow,
          'gray'       : $gray,
          'black'      : white,
  );

  @each $name, $color in $colors {
    .text-#{$name}{
      color: darken($color, 20%) !important;
    }
  }
}
